<script lang="ts" setup>
import IconPark from '@/components/icon-park/IconPark.vue'
import { Like, PlayTwo, Add } from '@icon-park/vue-next'
import type { AlbumSong } from '@/types/artist'
import { useFormat } from '@/hooks/useFormat'
const { formatTimeStamp } = useFormat()

defineProps<{
  song: AlbumSong[]
}>()
</script>

<template>
  <div class="flex text-xs text-gray-400 py-2">
    <div class="flex-auto">歌曲</div>
    <div class="w-1/3">歌手</div>
    <div class="w-20">时长</div>
  </div>
  <template v-for="item in song" :key="item.id">
    <div class="text-xs flex hover:bg-slate-200 py-3 px-2 item">
      <div class="flex-auto flex items-center justify-between pr-5">
        <div class="flex">
          <div class="cursor-pointer">{{ item.name }}</div>
          <IconPark
            v-if="item.mv > 0"
            class="ml-2 text-orange-400 cursor-pointer"
            size="16"
            title="mv"
            :icon="PlayTwo"
          />
        </div>
        <div class="icon-action hidden text-gray-400">
          <div class="flex">
            <IconPark title="添加到" class="icon-hover" :icon="Add" size="14" />
            <IconPark title="喜欢" class="ml-2 icon-hover" :icon="Like" size="14" />
          </div>
        </div>
      </div>
      <div class="w-1/3 cursor-pointer icon-hover">{{ item.ar[0]?.name }}</div>
      <div class="w-20">{{ formatTimeStamp(item.dt) }}</div>
    </div>
  </template>
</template>

<style lang="less" scoped>
.item {
  &:hover {
    .icon-action {
      @apply block;
    }
  }
}
</style>
